<template>
  <div>
  <!-- 主内容区域 -->
  <div class="main-content">
    <div class="page-title">粉丝概览</div>

    <!-- 粉丝概览 -->
    <div class="fans-overview">
      <div class="overview-header">
        <div class="overview-title">粉丝数据概览</div>
        <div class="overview-filters">
          <div class="date-filter">
            <span>时间范围：</span>
            <el-radio-group v-model="timeRange">
              <el-radio-button label="7d">近7天</el-radio-button>
              <el-radio-button label="30d">近30天</el-radio-button>
              <el-radio-button label="90d">近90天</el-radio-button>
              <el-radio-button label="180d">近180天</el-radio-button>
            </el-radio-group>
          </div>
          <el-button type="text" size="small" @click="exportData">
            <i class="fa-solid fa-download"></i> 导出数据
          </el-button>
        </div>
      </div>

      <!-- 粉丝数据卡片 -->
      <div class="fans-stats">
        <div class="stat-card">
          <div class="stat-icon text-primary">
            <i class="fa-solid fa-users"></i>
          </div>
          <div class="stat-title">总粉丝数</div>
          <div class="stat-value">{{ formatNumber(totalFans) }}</div>
          <div class="stat-change" :class="{ 'positive': fansGrowthRate > 0, 'negative': fansGrowthRate < 0 }">
            <i :class="fansGrowthRate > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(fansGrowthRate) }}%
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon text-success">
            <i class="fa-solid fa-user-plus"></i>
          </div>
          <div class="stat-title">新增粉丝</div>
          <div class="stat-value">{{ formatNumber(newFans) }}</div>
          <div class="stat-change" :class="{ 'positive': newFansGrowthRate > 0, 'negative': newFansGrowthRate < 0 }">
            <i :class="newFansGrowthRate > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(newFansGrowthRate) }}%
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon text-warning">
            <i class="fa-solid fa-user-minus"></i>
          </div>
          <div class="stat-title">流失粉丝</div>
          <div class="stat-value">{{ formatNumber(lostFans) }}</div>
          <div class="stat-change" :class="{ 'positive': lostFansGrowthRate > 0, 'negative': lostFansGrowthRate < 0 }">
            <i :class="lostFansGrowthRate > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(lostFansGrowthRate) }}%
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon text-info">
            <i class="fa-solid fa-heart"></i>
          </div>
          <div class="stat-title">粉丝互动率</div>
          <div class="stat-value">{{ interactionRate }}%</div>
          <div class="stat-change" :class="{ 'positive': interactionRateGrowth > 0, 'negative': interactionRateGrowth < 0 }">
            <i :class="interactionRateGrowth > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(interactionRateGrowth) }}%
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon text-primary">
            <i class="fa-solid fa-clock"></i>
          </div>
          <div class="stat-title">粉丝活跃度</div>
          <div class="stat-value">{{ activityLevel }}%</div>
          <div class="stat-change" :class="{ 'positive': activityGrowth > 0, 'negative': activityGrowth < 0 }">
            <i :class="activityGrowth > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(activityGrowth) }}%
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon text-success">
            <i class="fa-solid fa-bolt"></i>
          </div>
          <div class="stat-title">粉丝质量指数</div>
          <div class="stat-value">{{ qualityIndex }}</div>
          <div class="stat-change" :class="{ 'positive': qualityGrowth > 0, 'negative': qualityGrowth < 0 }">
            <i :class="qualityGrowth > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(qualityGrowth) }}%
          </div>
        </div>
      </div>

      <!-- 粉丝分析图表 -->
      <div class="fans-charts">
        <div class="chart-card">
          <div class="chart-title">粉丝性别分布</div>
          <div class="chart-container">
            <canvas id="genderChart"></canvas>
          </div>
        </div>

        <div class="chart-card">
          <div class="chart-title">粉丝年龄分布</div>
          <div class="chart-container">
            <canvas id="ageChart"></canvas>
          </div>
        </div>

        <div class="chart-card">
          <div class="chart-title">粉丝活跃度分布</div>
          <div class="chart-container">
            <canvas id="activityChart"></canvas>
          </div>
        </div>

        <div class="chart-card">
          <div class="chart-title">粉丝等级分布</div>
          <div class="chart-container">
            <canvas id="levelChart"></canvas>
          </div>
        </div>
      </div>

      <!-- 粉丝活跃度 -->
      <div class="activity-card">
        <div class="activity-header">
          <div class="activity-title">粉丝活跃度分析</div>
          <div class="activity-filters">
            <el-select v-model="activityTimeRange" placeholder="时间范围" size="small">
              <el-option label="近7天" value="7d"></el-option>
              <el-option label="近30天" value="30d"></el-option>
              <el-option label="近90天" value="90d"></el-option>
            </el-select>
            <el-button type="text" size="small" @click="refreshActivityData">刷新</el-button>
          </div>
        </div>

        <el-table :data="activityData" stripe style="width: 100%">
          <el-table-column prop="time" label="时间段"></el-table-column>
          <el-table-column prop="activeFans" label="活跃粉丝数" :formatter="formatNumber"></el-table-column>
          <el-table-column prop="activeRate" label="活跃率" :formatter="formatPercentage"></el-table-column>
          <el-table-column prop="comments" label="评论数" :formatter="formatNumber"></el-table-column>
          <el-table-column prop="likes" label="点赞数" :formatter="formatNumber"></el-table-column>
          <el-table-column prop="shares" label="分享数" :formatter="formatNumber"></el-table-column>
        </el-table>
      </div>

      <!-- 粉丝地域分布 -->
      <div class="location-card">
        <div class="location-header">
          <div class="location-title">粉丝地域分布</div>
          <div class="location-actions">
            <el-button type="text" size="small" @click="exportLocationData">
              <i class="fa-solid fa-download"></i> 导出数据
            </el-button>
          </div>
        </div>

        <div class="location-content">
          <div class="location-map">
            <canvas id="locationMap"></canvas>
          </div>

          <div class="location-list">
            <div class="location-item" v-for="(location, index) in topLocations" :key="index">
              <div class="location-name">{{ location.name }}</div>
              <div class="location-percentage">{{ location.percentage }}%</div>
              <el-progress :percentage="location.percentage" :stroke-width="12" status="success"></el-progress>
            </div>
          </div>
        </div>
      </div>

      <!-- 粉丝增长趋势 -->
      <div class="growth-card">
        <div class="growth-header">
          <div class="growth-title">粉丝增长趋势</div>
          <div class="growth-filters">
            <el-radio-group v-model="growthChartType">
              <el-radio-button label="daily">日增长</el-radio-button>
              <el-radio-button label="weekly">周增长</el-radio-button>
              <el-radio-button label="monthly">月增长</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="growth-chart">
          <canvas id="growthChart"></canvas>
        </div>
      </div>
    </div>
  </div>

  </div>
</template>

<script>
import Chart from 'chart.js/auto';
export default {
  name: "FansOverview",
  components: {
    // 这里可以添加组件
  },
  data() {
    return {
      activeMenu: 'fans-overview',
      timeRange: '30d',
      activityTimeRange: '7d',
      growthChartType: 'daily',
      // 粉丝数据
      totalFans: 0,
      fansGrowthRate: 0,
      newFans: 0,
      newFansGrowthRate: 0,
      lostFans: 0,
      lostFansGrowthRate: 0,
      interactionRate: 0,
      interactionRateGrowth: 0,
      activityLevel: 0,
      activityGrowth: 0,
      qualityIndex: 0,
      qualityGrowth: 0,
      // 粉丝分析图表数据
      genderData: [],
      ageData: [],
      levelData: [],
      // 粉丝活跃度数据
      activityData: [],
      // 粉丝地域分布数据
      topLocations: [],
      // 粉丝增长趋势数据
      growthData: []
    }
  },
  mounted() {
    // 初始化数据
    this.initData();

    // 绘制图表
    this.$nextTick(() => {
      this.drawGenderChart();
      this.drawAgeChart();
      this.drawActivityChart();
      this.drawLevelChart();
      this.drawLocationMap();
      this.drawGrowthChart();
    });
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    initData() {
      // 初始化粉丝数据
      this.totalFans = Math.floor(Math.random() * 100000) + 10000;
      this.fansGrowthRate = Math.floor(Math.random() * 20) - 10;
      this.newFans = Math.floor(Math.random() * 5000) + 500;
      this.newFansGrowthRate = Math.floor(Math.random() * 20) - 10;
      this.lostFans = Math.floor(Math.random() * 1000) + 100;
      this.lostFansGrowthRate = Math.floor(Math.random() * 20) - 10;
      this.interactionRate = Math.floor(Math.random() * 50) + 10;
      this.interactionRateGrowth = Math.floor(Math.random() * 20) - 10;
      this.activityLevel = Math.floor(Math.random() * 80) + 10;
      this.activityGrowth = Math.floor(Math.random() * 20) - 10;
      this.qualityIndex = Math.floor(Math.random() * 100) + 1;
      this.qualityGrowth = Math.floor(Math.random() * 20) - 10;

      // 初始化粉丝分析图表数据
      this.genderData = [
        { label: '女性', value: Math.floor(Math.random() * 20) + 70 },
        { label: '男性', value: Math.floor(Math.random() * 20) + 10 },
        { label: '其他', value: 0 }
      ];
      this.genderData[2].value = 100 - this.genderData[0].value - this.genderData[1].value;

      this.ageData = [
        { label: '18岁以下', value: Math.floor(Math.random() * 10) + 5 },
        { label: '18-24岁', value: Math.floor(Math.random() * 30) + 20 },
        { label: '25-30岁', value: Math.floor(Math.random() * 30) + 30 },
        { label: '31-35岁', value: Math.floor(Math.random() * 20) + 15 },
        { label: '36-40岁', value: Math.floor(Math.random() * 10) + 5 },
        { label: '40岁以上', value: Math.floor(Math.random() * 5) + 2 }
      ];

      this.activityData = [
        { time: '00:00-06:00', activeFans: Math.floor(Math.random() * 100) + 10, activeRate: Math.floor(Math.random() * 10) + 1, comments: Math.floor(Math.random() * 50) + 5, likes: Math.floor(Math.random() * 100) + 10, shares: Math.floor(Math.random() * 20) + 2 },
        { time: '06:00-12:00', activeFans: Math.floor(Math.random() * 200) + 50, activeRate: Math.floor(Math.random() * 20) + 5, comments: Math.floor(Math.random() * 100) + 10, likes: Math.floor(Math.random() * 200) + 20, shares: Math.floor(Math.random() * 50) + 5 },
        { time: '12:00-18:00', activeFans: Math.floor(Math.random() * 300) + 100, activeRate: Math.floor(Math.random() * 30) + 10, comments: Math.floor(Math.random() * 150) + 15, likes: Math.floor(Math.random() * 300) + 30, shares: Math.floor(Math.random() * 80) + 8 },
        { time: '18:00-24:00', activeFans: Math.floor(Math.random() * 250) + 80, activeRate: Math.floor(Math.random() * 25) + 8, comments: Math.floor(Math.random() * 120) + 12, likes: Math.floor(Math.random() * 250) + 25, shares: Math.floor(Math.random() * 60) + 6 }
      ];

      this.levelData = [
        { label: '初级粉丝', value: Math.floor(Math.random() * 30) + 20 },
        { label: '中级粉丝', value: Math.floor(Math.random() * 30) + 30 },
        { label: '高级粉丝', value: Math.floor(Math.random() * 20) + 15 },
        { label: '核心粉丝', value: Math.floor(Math.random() * 10) + 5 }
      ];

      // 初始化粉丝地域分布数据
      this.topLocations = [
        { name: '广东', percentage: Math.floor(Math.random() * 20) + 10 },
        { name: '北京', percentage: Math.floor(Math.random() * 15) + 5 },
        { name: '上海', percentage: Math.floor(Math.random() * 15) + 5 },
        { name: '江苏', percentage: Math.floor(Math.random() * 10) + 3 },
        { name: '浙江', percentage: Math.floor(Math.random() * 10) + 3 }
      ];
      this.topLocations[4].percentage = 100 - this.topLocations.reduce((sum, location) => sum + location.percentage, 0);

      // 初始化粉丝增长趋势数据
      this.growthData = [
        { label: '周一', value: Math.floor(Math.random() * 100) + 10 },
        { label: '周二', value: Math.floor(Math.random() * 100) + 10 },
        { label: '周三', value: Math.floor(Math.random() * 100) + 10 },
        { label: '周四', value: Math.floor(Math.random() * 100) + 10 },
        { label: '周五', value: Math.floor(Math.random() * 100) + 10 },
        { label: '周六', value: Math.floor(Math.random() * 100) + 10 },
        { label: '周日', value: Math.floor(Math.random() * 100) + 10 }
      ];
    },
    formatNumber(value) {
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    formatPercentage(value) {
      return value.toFixed(2) + '%';
    },
    drawGenderChart() {
      const ctx = document.getElementById('genderChart').getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: this.genderData.map(item => item.label),
          datasets: [{
            data: this.genderData.map(item => item.value),
            backgroundColor: ['#FF69B4', '#1E90FF', '#D3D3D3']
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawAgeChart() {
      const ctx = document.getElementById('ageChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: this.ageData.map(item => item.label),
          datasets: [{
            label: '粉丝数量',
            data: this.ageData.map(item => item.value),
            backgroundColor: '#4CD964'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawActivityChart() {
      const ctx = document.getElementById('activityChart').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: this.activityData.map(item => item.time),
          datasets: [{
            label: '活跃粉丝数',
            data: this.activityData.map(item => item.activeFans),
            borderColor: '#FF9500',
            backgroundColor: 'rgba(255, 149, 0, 0.1)',
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawLevelChart() {
      const ctx = document.getElementById('levelChart').getContext('2d');
      new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: this.levelData.map(item => item.label),
          datasets: [{
            data: this.levelData.map(item => item.value),
            backgroundColor: ['#3399FF', '#4CD964', '#FF9500', '#FE2C55']
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawLocationMap() {
      const ctx = document.getElementById('locationMap').getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: this.topLocations.map(item => item.name),
          datasets: [{
            data: this.topLocations.map(item => item.percentage),
            backgroundColor: ['#3399FF', '#4CD964', '#FF9500', '#FE2C55', '#999999']
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawGrowthChart() {
      const ctx = document.getElementById('growthChart').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: this.growthData.map(item => item.label),
          datasets: [{
            label: '粉丝增长数',
            data: this.growthData.map(item => item.value),
            borderColor: '#4CD964',
            backgroundColor: 'rgba(76, 217, 100, 0.1)',
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    exportData() {
      console.log('导出粉丝数据');
    },
    refreshActivityData() {
      console.log('刷新粉丝活跃度数据');
    },
    exportLocationData() {
      console.log('导出粉丝地域分布数据');
    }
  }
}
</script>

<style scoped lang="scss">

/* 粉丝概览相关样式 */
.fans-overview {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.overview-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-filter .el-radio-group {
  display: flex;
}

.date-filter .el-radio-button__inner {
  padding: 8px 16px;
}

/* 粉丝数据卡片 */
.fans-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.stat-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.stat-title {
  font-size: 14px;
  color: var(--gray-color);
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
}

.stat-change {
  font-size: 14px;
  margin-top: 10px;
}

.stat-change.positive {
  color: var(--success-color);
}

.stat-change.negative {
  color: var(--primary-color);
}

/* 粉丝分析图表 */
.fans-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.chart-container {
  height: 300px;
}

/* 粉丝活跃度 */
.activity-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.activity-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

.activity-table {
  width: 100%;
}

/* 粉丝地域分布 */
.location-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.location-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.location-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.location-map {
  height: 300px;
}

.location-list {
  max-height: 300px;
  overflow-y: auto;
}

.location-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #EBEEF5;
}

.location-name {
  font-weight: 500;
}

.location-percentage {
  color: var(--gray-color);
}

/* 粉丝增长趋势 */
.growth-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.growth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.growth-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

.growth-chart {
  height: 300px;
}

/* 页脚 */
.footer {
  padding: 20px 0;
  text-align: center;
  color: var(--gray-color);
  font-size: 14px;
}
</style>
